<template>
    <!-- 一、创建容器 -->
    <div id="container" ref="setbox"></div>
</template>
<!-- 在Vue 3中，你通常不会在组件的顶层直接创建和初始化像Graph这样的实例。相反，你会在组件的生命周期钩子中创建实例，并确保在组件被销毁时正确地清理它。这样做是为了避免内存泄漏和其他潜在的问题。

下面是一个简单的Vue 3组件示例，它展示了如何在组件内部创建Graph实例，并将其挂载到DOM元素上。假设Graph是一个第三方库提供的类，你需要确保在组件的mounted生命周期钩子中初始化它，并在beforeUnmount钩子中清理它。 -->
<script setup>
import {Graph} from '@antv/x6'
import { ref, onMounted, onBeforeUnmount } from 'vue'
 // 使用ref获取DOM元素的引用
 const setbox = ref(null)
// 二、准备数据
// 节点
let nodeList = [
  {
    id:'start',
    x: 40,       // Number，必选，节点位置的 x 值
    y: 40,       // Number，必选，节点位置的 y 值
    width: 80,   // Number，可选，节点大小的 width 值
    height: 40,  // Number，可选，节点大小的 height 值
    // 我们可以通过 attrs 对象来配置节点样式
    attrs: {
      body: { rx: 12, ry: 12, stroke: '#6bcd92', cursor: 'pointer' },// 边框颜色
      label: { text: '中心主题', fill: '#6bcd92', fontSize: 14, cursor: 'pointer' }
    },
    data: { disableMove: false }//true为可拖拽，false不可拖拽
  },
  {
      id: 'node1', // String，节点的唯一标识
      x: 160,      // Number，必选，节点位置的 x 值
      y: 180,      // Number，必选，节点位置的 y 值
      width: 80,   // Number，可选，节点大小的 width 值
      height: 40,  // Number，可选，节点大小的 height 值
      label: '分支主题1', // String，节点标签
      shape: 'rect', // 使用 rect 渲染
    },
    {
      id: 'node2', // String，节点的唯一标识
      x: 160,      // Number，必选，节点位置的 x 值
      y: 180,      // Number，必选，节点位置的 y 值
      width: 80,   // Number，可选，节点大小的 width 值
      height: 40,  // Number，可选，节点大小的 height 值
      label: '分支主题2', // String，节点标签
      shape: 'ellipse', // 使用 rect 渲染
    },
    {
      id: 'node3', // String，节点的唯一标识
      x: 160,      // Number，必选，节点位置的 x 值
      y: 180,      // Number，必选，节点位置的 y 值
      width: 80,   // Number，可选，节点大小的 width 值
      height: 40,  // Number，可选，节点大小的 height 值
      label: '子主题1', // String，节点标签
    },
    {
      id: 'node4', // String，节点的唯一标识
      x: 160,      // Number，必选，节点位置的 x 值
      y: 180,      // Number，必选，节点位置的 y 值
      width: 80,   // Number，可选，节点大小的 width 值
      height: 40,  // Number，可选，节点大小的 height 值
      label: '子主题2', // String，节点标签
    }
]
// 边
let edgesList = [
    {
      source: 'start', // String，必须，起始节点 id
      target: 'node1', // String，必须，目标节点 id
      // 使用 attrs 对象来配置边的样式
      attrs: {
        line: {
          stroke: 'orange',
        }
      }
    },
    {
      source: 'start', // String，必须，起始节点 id
      target: 'node2', // String，必须，目标节点 id
    },
    {
      source: 'node1', // String，必须，起始节点 id
      target: 'node3', // String，必须，目标节点 id
    },
    {
      source: 'node1', // String，必须，起始节点 id
      target: 'node4', // String，必须，目标节点 id
    }
]
// 创建Graph实例的函数
const createGraph = () => {
      if (setbox.value) {
        // 假设Graph是一个已经导入的类
        // 三、渲染画布,创建一个 Graph 对象，并为其指定一个页面上的绘图容器，通常也会指定画布的大小
        const graph = new Graph({
          container: setbox.value,
          width: 1000,
          height: 1000,
          panning: true, //是否支持拖拽平移
          background: {
              color: '#fffbe6', // 设置画布背景颜色
            },
          grid: {
          size: 10,      // 网格大小 10px
          visible: true, // 渲染网格背景
            },
        })
        // 你可以在这里添加更多的初始化代码，比如添加节点和边
         // 四、使用刚刚创建的 graph 来渲染我们的节点和边
         const data= {
            // 节点
            nodes:nodeList,
            // 边
            edges:edgesList
        }
        graph.fromJSON(data)
        console.log('graph',graph);
      }
    }
   
    // 在组件挂载后创建Graph实例
    onMounted(() => {
      createGraph();
    }); 
  // 在组件卸载前清理Graph实例
  onBeforeUnmount(() => {
        // 假设Graph实例有一个destroy方法来清理资源
        // graph.destroy();
      })
</script>

<style lang="less" scoped>
</style>